<!--
  Copyright © 2016-2017 Cask Data, Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<!-- TOP PANEL -->

<div class="side-panel top">

  <div class="run-specific-section">
    <div class="hydrator-detail-metadata">
      <div class="pipeline-type">
        <span ng-if="TopPanelCtrl.GLOBALS.etlBatchPipelines.indexOf(TopPanelCtrl.app.type) !== -1"
              class="icon-ETLBatch"
              uib-tooltip="Type: Batch"
              tooltip-placement="bottom-left"
              tooltip-append-to-body="true"
              tooltip-class="toppanel-tooltip"></span>
        <span ng-if="TopPanelCtrl.GLOBALS.etlRealtime.indexOf(TopPanelCtrl.app.type) !== -1"
              class="icon-ETLRealtime"
              uib-tooltip="Type: Realtime"
              tooltip-placement="bottom-left"
              tooltip-append-to-body="true"
              tooltip-class="toppanel-tooltip"></span>
        <span ng-if="TopPanelCtrl.GLOBALS.etlDataStreams.indexOf(TopPanelCtrl.app.type) !== -1"
              class="icon-sparkstreaming"
              uib-tooltip="Type: Data Pipeline"
              tooltip-placement="bottom-left"
              tooltip-append-to-body="true"
              tooltip-class="toppanel-tooltip"></span>
      </div>
      <div class="pipeline-name text-left">
        <h1 uib-tooltip="{{ TopPanelCtrl.app.name }}"
            tooltip-placement="bottom-left"
            tooltip-append-to-body="true"
            tooltip-class="toppanel-tooltip"
            ng-bind="::TopPanelCtrl.app.name"
            ng-class="{'name-only': !TopPanelCtrl.app.description}">
        </h1>
        <p tooltip-placement="bottom"
           tooltip-append-to-body="true"
           tooltip-class="toppanel-tooltip"
           uib-tooltip-html="TopPanelCtrl.tooltipDescription"
           ng-bind="::TopPanelCtrl.app.description"
           ng-if="TopPanelCtrl.app.description">
        </p>
      </div>
    </div>

    <div class="app-status-container">
      <div class="btn"
           ng-class="{'btn-select': TopPanelCtrl.viewConfig}"
           ng-click="TopPanelCtrl.do('Config')">
        <div class="btn-container">
          <span class="fa fa-sliders"></span>
          <div class="button-label">Configure</div>
        </div>
      </div>
      <!-- IF ETL BATCH -->
      <div ng-if="TopPanelCtrl.GLOBALS.etlBatchPipelines.indexOf(TopPanelCtrl.app.type) !== -1">
        <div ng-if="['Deployed', 'Scheduling'].indexOf(TopPanelCtrl.scheduleStatus) !== -1 || TopPanelCtrl.scheduleStatus.error">
          <div ng-click="TopPanelCtrl.do('Schedule')"
              class="btn scheduler"
              ng-class="{'btn-select': TopPanelCtrl.viewScheduler}"
              ng-disabled="TopPanelCtrl.scheduleStatus === 'Scheduling' || TopPanelCtrl.scheduleStatus.error">
            <div class="btn-container">
              <span class="double-line" ng-if="(TopPanelCtrl.scheduleStatus === 'Deployed' || TopPanelCtrl.scheduleStatus.error) && !TopPanelCtrl.scheduleLoading">
                <span class="fa icon-runtimestarttime"></span>
                <div class="button-label">Schedule</div>
              </span>
              <span ng-if="TopPanelCtrl.scheduleLoading">
                <span class="fa fa-spinner fa-spin"></span>
              </span>
            </div>
          </div>
        </div>
        <div ng-if="['Scheduled', 'Suspending'].indexOf(TopPanelCtrl.scheduleStatus) !== -1">
          <div ng-click="TopPanelCtrl.do('Suspend')"
               class="btn scheduler"
               ng-disabled="TopPanelCtrl.scheduleStatus === 'Suspending'">
            <div class="btn-container">
              <span class="double-line" ng-if="TopPanelCtrl.scheduleStatus ==='Scheduled' && !TopPanelCtrl.scheduleLoading">
                  <span class="fa icon-runtimestarttime text-primary"></span>
                  <div class="button-label">Unschedule</div>
              </span>
              <span ng-if="TopPanelCtrl.scheduleLoading">
                <span class="fa fa-spinner fa-spin"></span>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div ng-if="TopPanelCtrl.GLOBALS.etlBatchPipelines.indexOf(TopPanelCtrl.app.type) !== -1">
        <div ng-if="['Starting', 'Succeeded', 'Failed', 'Stopped', 'Deployed'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div ng-click="TopPanelCtrl.doRunOrConfig()"
               class="btn"
               ng-disabled="TopPanelCtrl.appStatus === 'Starting'">
            <div class="btn-container">
              <span ng-if="TopPanelCtrl.appStatus !== 'Starting'">
                <span class="fa fa-play text-success"></span>
                <div class="button-label">Run</div>
              </span>
              <span ng-if="TopPanelCtrl.appStatus === 'Starting'">
                <span class="fa fa-spinner fa-spin"></span>
              </span>
            </div>
          </div>
        </div>
        <div ng-if="['Stopping', 'Running'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div ng-click="TopPanelCtrl.do('Stop')"
               class="btn"
               ng-disabled="TopPanelCtrl.appStatus === 'Stopping'">
            <div class="btn-container">
              <span ng-if="TopPanelCtrl.appStatus !== 'Stopping'">
                <span class="fa fa-stop text-danger"></span>
                <div class="button-label">Stop</div>
              </span>
              <span ng-if="TopPanelCtrl.appStatus === 'Stopping'">
                <div class="btn-container">
                  <span class="fa fa-spinner fa-spin"></span>
                </div>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- Realtime or data Streams -->
      <div ng-if="[TopPanelCtrl.GLOBALS.etlRealtime, TopPanelCtrl.GLOBALS.etlDataStreams].indexOf(TopPanelCtrl.app.type) !== -1">
        <div ng-if="['Stopped', 'Succeeded', 'Failed', 'Starting', 'Deployed'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div class="btn"
            ng-click="TopPanelCtrl.doRunOrConfig()"
            ng-disabled="TopPanelCtrl.appStatus === 'Starting'">
            <div class="btn-container">
              <span ng-if="TopPanelCtrl.appStatus !== 'Starting'">
                <span class="fa fa-play text-success"></span>
                <div class="button-label">Run</div>
              </span>
              <span ng-if="TopPanelCtrl.appStatus === 'Starting'">
                <span class="fa fa-spinner fa-spin"></span>
              </span>
            </div>
          </div>
        </div>
        <div ng-if="['Running', 'Stopping'].indexOf(TopPanelCtrl.appStatus) !== -1">
          <div class="btn"
            ng-click="TopPanelCtrl.do('Stop')"
            ng-disabled="TopPanelCtrl.appStatus === 'Stopping'">
            <div class="btn-container">
              <span ng-if="TopPanelCtrl.appStatus !== 'Stopping'">
                <span class="fa fa-stop text-danger"></span>
                <div class="button-label">Stop</div>
              </span>
              <span ng-if="TopPanelCtrl.appStatus === 'Stopping'">
                <span class="fa fa-spinner fa-spin"></span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="btn"
           ng-class="{'btn-select': TopPanelCtrl.viewLogs}"
           ng-disabled="TopPanelCtrl.appStatus === 'Deployed'"
           ng-click="TopPanelCtrl.viewLogs = !TopPanelCtrl.viewLogs"
           uib-tooltip="This pipeline has never been run"
           tooltip-enable="TopPanelCtrl.appStatus === 'Deployed'"
           tooltip-placement="bottom-left"
           tooltip-append-to-body="true"
           tooltip-class="toppanel-tooltip">
        <div class="btn-container">
          <span class="fa fa-file-text-o"></span>
          <div class="button-label">Logs</div>
        </div>
      </div>
    </div>
  </div>

  <div class="pipeline-specific-section">
    <a href="{{TopPanelCtrl.viewInCdapLink}}">
      <div class="btn">
        <div class="btn-container">
          <span class="fa fa-info-circle"></span>
          <div class="button-label">Details</div>
        </div>
      </div>
    </a>
    <div class="btn border-right"
         ng-class="{'btn-select': TopPanelCtrl.viewSummary}"
         ng-click="TopPanelCtrl.viewSummary = !TopPanelCtrl.viewSummary">
      <div class="btn-container">
        <span class="fa fa-line-chart"></span>
        <div class="button-label">Summary</div>
      </div>
    </div>
    <div class="btn margin-left"
         ui-sref="hydrator.create({data: TopPanelCtrl.cloneConfig, type: TopPanelCtrl.app.type, isClone: true})"
         ng-disabled="TopPanelCtrl.isCloneDisabled"
         uib-tooltip="etl-batch and etl-realtime pipelines are no longer supported"
         tooltip-enable="TopPanelCtrl.isCloneDisabled"
         tooltip-placement="bottom-right"
         tooltip-append-to-body="true"
         tooltip-class="toppanel-tooltip"
         ng-class="{'disabled': TopPanelCtrl.isCloneDisabled}">
      <div class="btn-container">
        <span class="icon-clone"></span>
        <div class="button-label">Clone</div>
      </div>
    </div>
    <div class="btn"
         ng-click="TopPanelCtrl.exportConfig()">
      <div class="btn-container">
        <span class="fa icon-export"></span>
        <div class="button-label">Export</div>
      </div>
    </div>
    <!-- For styling consistency, wrapping the div on <a> -->
    <div class="btn"
      ng-click="caskConfirm()"
      confirmable-modal-class="hydrator-modal center"
      cask-confirmable="TopPanelCtrl.do('Delete')"
      data-confirmable-content="Are you sure you want to delete the pipeline <strong>'{{TopPanelCtrl.app.name}}'</strong>?">
      <div class="btn-container">
        <span class="icon-delete"></span>
        <div class="button-label">Delete</div>
      </div>
    </div>
  </div>
  <cask-resource-center-button></cask-resource-center-button>
  <div class="pipeline-settings-backdrop"
       ng-if="TopPanelCtrl.viewSummary || TopPanelCtrl.viewLogs || TopPanelCtrl.viewScheduler || TopPanelCtrl.viewConfig"
       ng-click="TopPanelCtrl.viewSummary = false; TopPanelCtrl.viewLogs = false; TopPanelCtrl.viewScheduler = false; TopPanelCtrl.viewConfig = false">
  </div>
  <div class="pipeline-scheduler" ng-if="TopPanelCtrl.viewScheduler">
    <my-pipeline-scheduler
      store="TopPanelCtrl.HydratorPlusPlusDetailNonRunsStore"
      action-creator="TopPanelCtrl.HydratorPlusPlusDetailActions"
      pipeline-name="{{TopPanelCtrl.app.name}}"
      on-close="TopPanelCtrl.viewScheduler = false"
      is-disabled="true"
      suspend-schedule="TopPanelCtrl.suspendPipeline()"
      start-schedule="TopPanelCtrl.doScheduleOrConfig()"
      show-config="!TopPanelCtrl.validToStartOrSchedule">
    </my-pipeline-scheduler>
  </div>
  <div class="pipeline-configurations" ng-if="TopPanelCtrl.viewConfig">
    <div
      runtime-arguments="TopPanelCtrl.runtimeArguments"
      apply-runtime-arguments="TopPanelCtrl.applyRuntimeArguments()"
      resolved-macros="TopPanelCtrl.resolvedMacros"
      pipeline-name="{{TopPanelCtrl.app.name}}"
      run-pipeline="TopPanelCtrl.startOrSchedulePipeline()"
      pipeline-action="{{TopPanelCtrl.pipelineAction}}"
      on-close="TopPanelCtrl.viewConfig = false"
      namespace-id="{{TopPanelCtrl.$state.params.namespace}}"
      store="TopPanelCtrl.HydratorPlusPlusDetailNonRunsStore"
      action-creator="TopPanelCtrl.HydratorPlusPlusDetailActions"
      template-type="{{TopPanelCtrl.config.artifact.name}}"
      is-deployed="true"
      my-pipeline-config>
    </div>
  </div>
  <div class="pipeline-settings pipeline-logs-section" ng-if="TopPanelCtrl.viewLogs" ng-controller="HydratorPlusPlusDetailLogCtrl as LogsCtrl">
    <my-log-viewer
      namespace-id="{{LogsCtrl.params.namespace}}"
      app-id="{{LogsCtrl.params.appId}}"
      program-type="{{LogsCtrl.params.programType}}"
      program-id="{{LogsCtrl.params.programId}}"
      run-id="{{LogsCtrl.params.runId}}"
      is-pipeline="true">
    </my-log-viewer>
  </div>
  <div class="pipeline-settings pipeline-summary">
    <div
      store="TopPanelCtrl.HydratorPlusPlusDetailRunsStore"
      pipeline-config="TopPanelCtrl.cloneConfig"
      action-creator="TopPanelCtrl.HydratorPlusPlusDetailActions"
      pipeline-type="{{TopPanelCtrl.pipelineType}}"
      ng-if="TopPanelCtrl.viewSummary"
      on-close="TopPanelCtrl.hidePipelineSummary()"
      my-pipeline-summary>
    </div>
  </div>
</div>
